<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript">
	function cx() {
		var bjId=$('#bj').val();
		var kcId=$('#kc').val();
		if (kcId==0||bjId==0) {
			$('#table').empty();
		}else{
			$('#table').load('grade',{method:'getClassGrade',bjId:bjId,kcId:kcId});
		}
	}
	function cjChange(id,value) {
		$.post('grade',{method:'cjChange',grade:value,id:id},function(data){});
	}
	function selectChange() {
		$('#table').empty();
	}
</script>
<title>按班级录入成绩</title>

<style>
        h1 {
            font-size: 30px;
           
            text-transform: uppercase;
            font-weight: 300;
            text-align: center;
            margin-bottom: 15px;
        }
        table {
            width: 100%;
            table-layout: fixed;
        }
        .tbl-header {
            background-color: rgba(255,255,255,0.3);
        }
        .tbl-content {
            height: 300px;
            overflow-x: auto;
            margin-top: 0px;
            border: 1px solid rgba(255,255,255,0.3);
        }
        th {
            padding: 20px 15px;
            text-align: left;
            font-weight: 500;
            font-size: 12px;
         
            text-transform: uppercase;
        }
        td {
            padding: 15px;
            text-align: left;
            vertical-align: middle;
            font-weight: 300;
            font-size: 12px;
            
            border-bottom: solid 1px rgba(255,255,255,0.1);
        }


    </style>


<style type="text/css">
 .contrainer{
   width:800px;
   margin:20px auto
   text-align:center;
 }
  .contrainer h3{
    text-align:center;
  }
  .contrainer table{
    width:100%; 
    border-collapse:collapse;
    text-align:center;
  }
  .
  td,th{
    padding:8px 15px;
    text-align:center;
  }
</style>
</head>
<body background="images/1.jpg">
    <p>
    <div class=contrainer>
     <label>班级:</label>
      <select id="bj" onchange="selectChange()">
         <option value="0">---请选择----</option>
         <c:forEach items="${bjs}" var="bj">       
         <option value="${bj.id}">${bj.name}</option> 
      </c:forEach>
      </select>
     <label>课程:</label> 
      <select id="kc" onchange="selectChange">
        <option value="0">---请选择----</option>    
         <c:forEach items="${kcs}" var="kc">
         	<option value="${kc.id}">${kc.name}</option>
         </c:forEach>
      </select>
      <button type="button" onclick="cx()">查询</button>
  </div>
  
   <div id="table"class="contrainer">
   <a href="main.jsp">返回我的</a>
   </div>
</body>
</html>